<template>
    <a-breadcrumb>
      <a-breadcrumb-item>菜单</a-breadcrumb-item>
      <a-breadcrumb-item v-for="(item, index) in nowRouteMatched" :key="item">
        <span v-if="nowRouteMatched.length - 1 !== index"><a :href="item.path">{{ item.meta.title }}</a></span>
        <span v-else>{{ item.meta.title }}</span>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </template>
  <script setup lang="ts">
  import { useRoute } from "vue-router";
  import { ref, watch, watchEffect } from "vue";
  const route = useRoute();
  const nowRouteMatched = ref();
  watchEffect(() => {
    let routesArray = JSON.parse(JSON.stringify(route.matched))
    for (let i = 0; i < routesArray.length - 1; i++) {
      if (routesArray[i].path === routesArray[i + 1].path) {
        routesArray = routesArray.splice(i, 1)
      }
    }
    console.log(route.matched)
    nowRouteMatched.value = routesArray;
    console.log(routesArray)
  });
  </script>
  <style lang="scss" scoped>
  .ant-breadcrumb {
    cursor: default;
  }
  </style>
  